<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta charset="utf-8" />
<title></title>
<link href="../css/bootstrap.min.css" rel="stylesheet">
<link href="../css/bootstrap-select.css" rel="stylesheet">
<link rel="stylesheet" href="../css/bootstrap-datetimepicker.min.css">
<link rel="stylesheet" href="../css/bootstrap-treeview.min.css">
<link href="../css/bootstrap-table.css" rel="stylesheet">
<link href="../css/bootstrap-table-fixed-columns.css" rel="stylesheet">
<link href="../css/font-awesome.min.css" rel="stylesheet">
<link href="../css/JyyCommon.css" rel="stylesheet">
<link href="../css/JyyTable.css" rel="stylesheet">
<link href="../css/JyyTree.css" rel="stylesheet">
<link href="../css/JyyMsgBox.css" rel="stylesheet">
<script type="text/javascript" src="../js/jquery-3.2.1.js"></script>
<script type="text/javascript" src="../js/jquery.form.min.js"></script>
<script type="text/javascript" src="../js/jquery-ui.min.js"></script>
<script type="text/javascript" src="../js/bootstrap.min.js"></script>
<script type="text/javascript"
	src="../js/bootstrap-datetimepicker.min.js"></script>
<script type="text/javascript" src="../js/bootstrap-paginator.min.js"></script>
<script type="text/javascript" src="../js/bootstrap-treeview.min.js"></script>
<script type="text/javascript" src="../js/bootstrap-select.js"></script>
<script type="text/javascript" src="../js/bootstrap-table.js"></script>
<script type="text/javascript"
	src="../js/bootstrap-table-fixed-columns.js"></script>
<script type="text/javascript" src="../js/jyy_modal.js"></script>
<script type="text/javascript" src="../js/JyyCommon.js"></script>
<script type="text/javascript" src="../js/JyyTable.js"></script>
<script type="text/javascript" src="../js/JyyTree.js"></script>
<script type="text/javascript" src="../js/JyyMsgBox.js"></script>
<script type="text/javascript" src="../js/JyyLoading.js"></script>
<script type="text/javascript" src="../js/echarts-4.9.0.js"></script>
<script type="text/javascript" src="../js/echarts-liquidfill.js"></script>
<script type="text/javascript">
var projectId=this.getQueryString('projectId');
$(function(){
	getyear();
	getabandonyear();
	
})
function getyear(){
	$.ajax({
		url : "../g/service/Sample/getRenewableyyear",
    	type:'post',
        contentType: 'application/json; charset=utf-8',
        data:JSON.stringify({"planid" : projectId }),
        success : function(data){
        	var selectedId = "";
            $.each(data.iyear, function(i,val){ 
            	$("#yearSel").append("<option value ='"+val+"'>"+val+"</option>");
            	if(i==0) selectedId = val;
            });
            $('#yearSel').selectpicker('refresh');
            $('#yearSel').selectpicker('val',selectedId);
            selectTotal();
        }
    })
}

function selectTotal(){
	var year = document.getElementById("yearSel").value;
	echars(year);
}

function echars(year){
	var num = 0;
	var pvnum = 0;
	var powernum = 0;
	$.ajax({
    	url : "../g/service/Sample/renewableEchars",
    	type:'post',
        contentType: 'application/json; charset=utf-8',
        data:JSON.stringify({"planid" : projectId , "yearid": year}),
        success : function(data){
        	for(var item of data.renewable){
        		document.getElementById("pvCum").innerHTML=item.cut_pvos_power;
            	document.getElementById("windCum").innerHTML=item.cut_wind_power;
            	document.getElementById("powerCum").innerHTML=item.cut_power;
            	num=Number(item.cut_wind_rate);
            	pvnum=Number(item.cut_pvos_rate);
            	powernum=Number(item.cut_power_rate);
        	}
        	
       	 	var chartDom = document.getElementById('windLiq');
       		var myChart = echarts.init(chartDom);
       		var option;
       		var option2;

       		option = {
    			center: ["45%", "60%"],
	  			series: [{
  			        name: "目前完成量",
  			        type: "liquidFill",
  			        radius: "75%",
  			        center: ["50%", "50%"],
  			        data: [num],
  			        itemStyle: {
  			            color: "#7DD259",
  			        },
  			        label: {
  						formatter: function (params) {
  							var x = toFixed(params.value*100, 2);
  				        	return x + '%';
  			            },
  			            color: "#2a4c96",
	                    fontSize: 16,
	                    fontWeight: "bold",
	                    fontFamily: "Microsoft YaHei"
  			        },
  			        outline: {
  			            show: true,
  			            borderDistance: 5,
   			            borderDistance: 0,
   			            itemStyle: {
   			            	borderColor: "#00B359",
   			              	borderWidth: 3,
   			              	shadowBlur: 10,
   			              	shadowColor: "rgba(0, 0, 0, 0.25)",
   			            },
  			        },
  			        backgroundStyle: {
  			            color: "#e5f6fc",
  			        },
  			    }]
       		};
       		option && myChart.setOption(option);
        	 
       		var chartDom = document.getElementById('PvLiq');
        	var myChart = echarts.init(chartDom);
        	var option;
        	var option2;

         	option = {
      			center: ["45%", "60%"],
        		series: [{
    				name: "目前完成量",
   			        type: "liquidFill",
   			        radius: "75%",
   			        center: ["50%", "50%"],
   			        data: [pvnum],
   			        itemStyle: {
   			            color: "#FFBF00",
   			        },
   			        label: {
  						formatter: function (params) {
  							var x = toFixed(params.value*100, 2);
  				        	return x + '%';
  			            },
  			            color: "#2a4c96",
	                    fontSize: 16,
	                    fontWeight: "bold",
	                    fontFamily: "Microsoft YaHei"
   			        },
   			        outline: {
   			            show: true,
   			            borderDistance: 0,
   			            itemStyle: {
   			            	borderColor: "#00B359",
   			              	borderWidth: 3,
   			              	shadowBlur: 10,
   			              	shadowColor: "rgba(0, 0, 0, 0.25)",
   			            },
   			        },
   			        backgroundStyle: {
   			            color: "#e5f6fc",
   			        },
   			    }]
         	};
         	option && myChart.setOption(option);
         	
         	var chartDom = document.getElementById('powerLiq');
        	var myChart = echarts.init(chartDom);
        	var option;
        	var option2;

         	option = {
      			center: ["45%", "60%"],
        		series: [{
    				name: "目前完成量",
   			        type: "liquidFill",
   			        radius: "75%",
   			        center: ["50%", "50%"],
   			        data: [powernum],
   			        itemStyle: {
   			            color: "#F86400",
   			        },
   			        label: {
  						formatter: function (params) {
  							var x = toFixed(params.value*100, 2);
  				        	return x + '%';
  			            },
  			            color: "#2a4c96",
	                    fontSize: 16,
	                    fontWeight: "bold",
	                    fontFamily: "Microsoft YaHei"
   			        },
   			        outline: {
   			            show: true,
   			            borderDistance: 0,
   			            itemStyle: {
   			              	borderColor: "#00B359",
   			             	borderWidth: 3,
   			              	shadowBlur: 10,
   			              	shadowColor: "rgba(0, 0, 0, 0.25)",
   			            },
   			        },
   			        backgroundStyle: {
   			            color: "#e5f6fc",
   			        },
   			    }]
         	};
         	option && myChart.setOption(option);
    	}
    }) 
}

function toFixed(number,len){
  //需要n位小数就乘以n倍
  const ceil = Math.pow(10,len);
  //加0.5是为了四舍五入
  const intNum = number*ceil+0.5;
  //再除以n倍
  const result = parseInt(intNum,10)/ceil;
  return result
}
function getabandonyear(){
	$.ajax({
    	url : "../g/service/Sample/getabandonyear",
    	type:'post',
        contentType: 'application/json; charset=utf-8',
        data:JSON.stringify({"planid" : projectId }),
        success : function(data){
        	var selectedId = "";
            $.each(data.iyear, function(i,val){ 
            	$("#year").append("<option value ='"+val+"'>"+val+"</option>");
            	if(i==0) selectedId = val;
            });
            $('#year').selectpicker('refresh');
            $('#year').selectpicker('val',selectedId);
            getabandonday();
        }
    })
}

function  getabandonday(){
	$.ajax({
    	url : "../g/service/Sample/getabandonday",
    	type:'post',
        contentType: 'application/json; charset=utf-8',
        data:JSON.stringify({"planid" : projectId }),
        success : function(data){
        	var selectday = $("#selectday");
        	var selecttoday = $("#selecttoday");
            $.each(data, function(i,val){
            	$.each(val,function(u,value){
            		selectday.append("<option value ='"+value+"'>"+value+"</option>");
                    selecttoday.append("<option value ='"+value+"'>"+value+"</option>");
            	})
                $('#selectday').selectpicker('refresh');
                $('#selecttoday').selectpicker('refresh');
                $('#selectday').selectpicker('val', 1);
                $('#selecttoday').selectpicker('val', 1);
			});
            abandonselect();
        }
    })
}

function abandonselect(){
	var year = document.getElementById("year").value;
	var ex2 = Number(document.getElementById("selecttoday").value);
	var ex1  = Number(document.getElementById("selectday").value);
	if(ex1 > ex2){
		alert("开始时间不能大于结束时间");
		return
	};
   
	getabandondata(year,ex1,ex2);
}

function getabandondata(year,ex1,ex2){
	var NameArr=[];
	var arr={};
	var dataList = [];
	var hour=[];
	var color = {"弃风电量":"#93cf53","弃光电量":"#fcbd00"};
	$.ajax({
    	url : "../g/service/Sample/getabandondata",
    	type:'post',
        contentType: 'application/json; charset=utf-8',
        data:JSON.stringify({"planid" : projectId , "year":year,"ex1":ex1,"ex2":ex2}),
        success : function(data){
        	for(var item of data.scenceData){
        		let type = item.typename;
        		if(arr[type]){
        			arr[type].push(item.val);
        			arr[type+"name"].push(item.ex2+'-'+item.hh);
        		}else{
        			arr[type] = [];
        			arr[type+"name"] = [];
        			arr[type].push(item.val);
        			arr[type+"name"].push(item.ex2+'-'+item.hh);
        			NameArr.push(type);
        		}
        	};
        	for(var name of NameArr){
        		hour = arr[name+"name"];
        		dataList.push({"name":name,"data":arr[name], "type":'line',
        		      "stack": 'Total',"showSymbol": false,itemStyle:{normal:{color:color[name],lineStyle:{color:color[name]}}}})
        	}
        	var chartDom = document.getElementById('echars');
        	var myChart = echarts.init(chartDom);
        	var option;

        	option = {
        		title: { text: '' },
        	  	tooltip: { trigger: 'axis' },
        	  	legend: { data: NameArr },
        	  	grid: {
	        	    left: '3%',
	        	    right: '5%',
	        	    containLabel: true
        	  	},
   				toolbox: {
   					show: true,
   					right: 30,
   					itemSize: 20,
   					itemGap: 12,
   				    feature: {
   				    	myTool: {
			        		show: true,
			        		title: "导出为Excel",
			        		icon: 'image://../images/excel.png',
			        		onclick: (o) => {
								var option = o.option;
								var dataSource = [];
								var dataType = "\uFEFF"; //解决乱码问题
								dataType += option.xAxis[0].name+",";  //添加表格的头
								if(option.series.length > 0) {
									for(var i = 0;i < option.series.length;i++) {
										dataType += option.series[i].name+","
									}
									dataType = dataType.substr(0, dataType.length-1)
								}
								dataType += '\n'; // 以上是导出的Excel文件头部

								for(var i = 0;i < option.xAxis[0].data.length;i++) {
									var arr = [];
									for(var j = 0;j < option.series.length+1;j++) {
										if(j == 0) {
											arr.push(" "+option.xAxis[0].data[i]);
										} else {
											arr.push(option.series[j-1].data[i]);
										}
									}
									dataSource.push(arr);
								}
								// 从dataSource中取出数据存入数据源（dataType）
								dataSource.map(item => dataType += `${item.join(',')}\n`); 
								// 使用Blob，获得二进制实例
								const csvData = new Blob([dataType], {
								    type: 'text/csv'
								});
								// 创建a标签
								const _a = document.createElement('a');
								_a.href = URL.createObjectURL(csvData);
								_a.target = '_blank';
								_a.download = `弃电量曲线.csv`;
								document.body.appendChild(_a);
								_a.click();
								document.body.removeChild(_a);
		                   	},
			        	},
			        	saveAsImage: {name:"弃电量曲线",icon:"image://../images/downpic.png"}
   				    }
				},
        	  	xAxis: {
	        		name:"天-时",
	        	    type: 'category',
	        	    boundaryGap: false,
	        	    data: hour
        	  	},
        	  	dataZoom:[{
      		 　　		type:"inside",//详细配置可见echarts官网
      		 　	},{ 
	      	  	  	orient: "horizontal",
	              	show: this.zoomShow,//控制滚动条显示隐藏
	              	realtime: true, //拖动滚动条时是否动态的更新图表数据
	              	height: 25, //滚动条高度
	              	start: 0, //滚动条开始位置（共100等份）
	              	end: this.endValue,//滚动条结束位置
	              	bottom: "3.5%",
              	}],
        	  	yAxis: {
        		  	name:'MW',
        		  	axisLine: { show:false },
        	    	type: 'value'
        	  	},
        
        	  	series: dataList
        	};

        	option && myChart.setOption(option);
    		window.addEventListener("resize", () => {
    			if(myChart){
    				myChart.resize()
    			}
    		})
		}
	});
}

function getQueryString (name){
	var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
	var r = window.location.search.substr(1).match(reg);
	return r ? unescape(r[2]) : null;
}
</script>
<style type="text/css">
body, html {
	width: 100%;
	height: 100%;
}

.selBtn {
	float: left;
	margin-left: 20px;
	height: 30px;
	width: 70px;
	background-color: #1890FF;
	border-radius: 5px;
	border: 0px;
	color: white;
}

.selBtn:hover {
	background-color: #00BFFF;
}

.shadow {
	box-shadow: 0 0.05rem 1rem rgba(0, 0, 0, 0.15) !important;
	border-radius: 0.25rem !important;
	margin-left: 20px;
}

.bootstrap-select:not(.input-group-btn), .bootstrap-select[class*="col-"]
	{
	float: left;
}

.cumCard {
	min-width: 250px;
	height: 120px;
	display: inline-block;
	margin-top: 10px;
	width: 25%;
	margin-left: 5%;
}

.amount {
	min-width: 150px;
	width: calc(100% - 50px);
	height: 50px;
	margin-top: 20px;
	display: inline-block;
	text-align: right;
}

.val {
	display: inline-block;
	font-size: 20px;
	font-weight: bolder;
	color: #00CFFF;
	text-align: right;
	margin: 10px;
	width: calc(100% - 80px);
}

#cumulativeDiv::-webkit-scrollbar-thumb {
	background: rgba(0, 0, 0, 0.1);
	outline-color: #ccc;
}

.liqCard {
	margin-left: 148px;
	margin-right: 30px;
	width: 190px;
	height: 150px;
	display: inline-block;
	margin-top: 10px;
}
.cardUnit{
	display: inline-block;
	font-family: '黑体 Bold', '黑体' ;
	font-size:14px;
}
</style>
</head>
<body>
	<div style="overflow-y: auto; width: 100%; height: 100%;">
		<div style="height: 50px; width: calc(100% - 20px);">
			<div class="col-md-12"
				style="padding-left: 5px; padding-right: 5px; margin-top: 10px; margin-left: 20px;">
				<label class="control-label col-sm-1"
					style="float: left; margin-top: 7px; padding: 0px; width: 40px; font-weight: normal;">年</label>
				<select class="form-control selectpicker" title="请选择年" data-width="90px"
					id="yearSel"
					style="float: left; margin-top: -3px; padding: 5px; width: 120px; font-weight: normal;"></select>
				<button class="selBtn" onclick=selectTotal()>查询</button>
			</div>
		</div>
		<div id="cumulativeDiv" class="shadow" style="width: calc(100% - 40px);min-height: 385px;position: relative;margin-bottom: 5px;">
			<p style="margin-top: 10px;padding-top: 10px;">
				<span style="color: #1890FF;font-weight: 700;font-size: 16px;margin-left: 20px;font-family: '黑体 Bold', '黑体';">年度可再生能源消纳分析</span>
			</p>
			<div style="margin-top: 20px;width: calc(100% - 120px);margin-left: 60px;">
				<div class="cumCard">
					<div ><span class="cardSpan">弃风电量</span></div>
					<div class="amount">
						<div class="val" id="windCum"></div>
						<div class="cardUnit">亿千瓦时</div>
					</div>
				</div>
				<div class="cumCard">
					<div ><span class="cardSpan">弃光电量</span></div>
					<div class="amount">
						<div class="val" id="pvCum"></div>
						<div class="cardUnit">亿千瓦时</div>
					</div>
				</div>
				<div class="cumCard">
					<div id="yunxing"><span class="cardSpan">弃电量</span></div>
					<div class="amount">
						<div class="val" id="powerCum"></div>
						<div class="cardUnit">亿千瓦时</div>
					</div>
				</div>
			</div>
			<div style="margin-top: 20px;width: calc(100% - 120px);margin-left: 60px;">
				<div class="cumCard" style="height: 140px;">
					<div><span class="cardSpan">弃风率</span></div>
					<div id="windLiq" style="display: inline-block; width: 100%; height: 130px;text-align: right;"></div>
				</div>
				<div class="cumCard" style="height: 140px;">
					<div ><span class="cardSpan">弃光率</span></div>
					<div id="PvLiq" style="display: inline-block; width: 100%; height: 130px;text-align: right;"></div>
				</div>
				<div class="cumCard" style="height: 140px;">
					<div ><span class="cardSpan">弃电率</span></div>
				<div id="powerLiq" style="display: inline-block; width: 100%; height: 130px;text-align: right;"></div>
				</div>
			</div>
		</div>


		<div style="height: 50px; width: calc(100% - 20px);">
			<div class="col-md-12"
				style="padding-left: 5px; padding-right: 5px; margin-top: 10px; margin-left: 20px;">
				<label class="control-label col-sm-1"
					style="float: left; margin-top: 7px; padding: 0px; width: 40px; font-weight: normal;">年份</label>
				<select class="form-control selectpicker" title="请选择年份" data-width="100px"
					id="year"
					style="float: left; margin-top: -3px; padding: 5px; width: 120px; font-weight: normal;"></select>
				<label class="control-label col-sm-1"
					style="float: left; margin-top: 7px; padding: 0px; width: 53px; font-weight: normal; margin-left: 26px;">天</label>
				<select class="form-control selectpicker" title="请选择天" data-width="90px"
					id="selectday"
					style="float: left; margin-top: -3px; padding: 5px; width: 132px; font-weight: normal; margin-right: -20px; margin-left: -30px;"></select>
				<label class="control-label col-sm-1"
					style="float: left; margin-top: 7px; padding: 0px; width: 53px; font-weight: normal; left: 21px;">~</label>
				<select class="form-control selectpicker" title="请选择天" data-width="90px"
					id="selecttoday"
					style="float: left; margin-top: -3px; padding: 5px; width: 132px; font-weight: normal; margin-left: -41px"></select>
				<button class="selBtn" onclick="abandonselect()">查询</button>
			</div>
		</div>

		<div id="yearRenewable" class="shadow"
			style="width: calc(100% - 40px); min-height: 400px; position: relative;margin-bottom: 20px;">
			<p style="margin-top: 10px; padding-top: 10px;">
				<span
					style="color: #1890FF; font-weight: 700; font-size: 16px; margin-left: 20px; font-family: '黑体 Bold', '黑体';">弃电量曲线</span>
			</p>

			<div id="echars"
				style="width: 100%; height: 460px; display: inline-block; margin-top: -24px; margin-left: 0px;"></div>
		</div>
	</div>
</body>
</html>